<script>
import {defineComponent} from 'vue'
import {nanoid} from "nanoid";

export default defineComponent({
  name: "Header",
  data() {
    return {
      title: ""
    }
  },
  methods: {
    addTodo() {
      if (this.title === "") {
        alert("任务名称不能为空")
      } else {
        const todoObj = {id: nanoid(), title: this.title, done: false}
        this.$emit("getTodoObj", todoObj)
        this.title = ""
      }
    }
  }
})
</script>

<template>
  <div class="header">
    <input type="text" placeholder="请输入任务名称" v-model.trim="title" @keyup.enter="addTodo">
  </div>
</template>

<style scoped lang="less">
input {
  width: 100%;
  height: 30px;
  outline: none;
  border-radius: 15px;
  border: 2px solid #DCDCDC;
}
</style>
